<template>
   <!-- 弹窗组件 -->
   <div class="dialog-box">
      <el-dialog
         v-model="dialogVisible"
         title="选择直属上级"
         width="800"
      >
         <div class="dialog-content">
            <!-- 分组区域保持不变 -->
            <div class="row-1">
               <div
                  class="row-1-title"
                  @click="isSearch = true"
                  v-show="!isSearch"
               >
                  <div>组织架构</div>
                  <div style="cursor: pointer">
                     <el-icon><Search /></el-icon>
                  </div>
               </div>
               <div
                  class="row-1-content"
                  v-show="isSearch"
               >
                  <el-input
                     ref="inputRef"
                     @blur="handleSearchBlur"
                     autofocus
                     placeholder="请输入"
                     suffix-icon="Search"
                     v-model="filterText"
                  />
               </div>
               <div class="row-1-content">
                  <el-tree
                     style="max-width: 600px"
                     :data="data"
                     :accordion="!filterText"
                     highlight-current="true"
                     @node-click="handleNodeClick"
                     :filter-node-method="filterNode"
                     ref="treeRef"
                     :props="defaultProps"
                  />
               </div>
            </div>

            <!-- 左侧产品列表 -->
            <div class="row-2">
               <div class="table-container">
                  <el-table
                     ref="leftTableRef"
                     :data="tableData"
                     style="width: 100%"
                     border
                     :row-key="(row:User) => row.id"
                  >
                     <el-table-column width="55">
                        <template #default="scope">
                           <el-radio
                              v-model="selectedRowId"
                              :label="scope.row.id"
                              @change="handleRadioChange(scope.row)"
                           />
                        </template>
                     </el-table-column>
                     <el-table-column
                        label="姓名"
                        property="Sname"
                        width="100"
                     >
                     </el-table-column>
                     <el-table-column
                        property="name"
                        label="编号"
                        width="120"
                     />
                     <el-table-column
                        property="Sphone"
                        label="角色"
                        show-overflow-tooltip
                        width="120"
                     />
                     <el-table-column
                        property="Sposition"
                        label="联系电话"
                        show-overflow-tooltip
                        width="120"
                     />
                  </el-table>
               </div>
            </div>
         </div>

         <template #footer>
            <div class="dialog-footer">
               <el-button
                  @click="
                     dialogVisible = false;
                     isSearch = false;
                  "
                  >取消</el-button
               >
               <el-button
                  color="#626aef"
                  @click="submit"
                  >确认</el-button
               >
            </div>
         </template>
      </el-dialog>
   </div>
</template>

<script setup lang="ts">
   import { ref, defineEmits, watch, nextTick } from "vue";
   import { Search } from "@element-plus/icons-vue";
   import type { TreeInstance } from "element-plus";
   import type { ElTable } from "element-plus";
   const flags = ref<number>();
   const isSearch = ref<boolean>(false);
   const inputRef = ref();

   // 监听isSearch变化，当为true时自动获取焦点
   watch(isSearch, (newVal) => {
      if (newVal) {
         // 使用nextTick确保DOM更新后再获取焦点
         nextTick(() => {
            inputRef.value?.focus();
         });
      }
   });

   interface User {
      Sname: string;
      name: string;
      Sphone: string;
      Sposition: string;
      id: number;
   }
   interface Tree {
      label: string;
      children?: Tree[];
   }

   const handleNodeClick = (data: Tree) => {
      console.log(data);
   };
   interface Tree {
      [key: string]: any;
   }

   const filterText = ref("");
   const treeRef = ref<TreeInstance>();

   const defaultProps = {
      children: "children",
      label: "label",
   };

   watch(filterText, (val) => {
      treeRef.value!.filter(val);
      // 当搜索框清空时，重置树的展开状态
      if (!val) {
         nextTick(() => {
            // 收起所有节点
            treeRef.value?.store.setData(data);
         });
      }
   });
   //watch(value,()=>{})
   //watchEffect(()=>{})
   const filterNode = (value: string, data: Tree) => {
      if (!value) return true;
      return data.label.includes(value);
   };

   const data: Tree[] = [
      {
         label: "Level one 1",
         children: [
            {
               label: "Level two 1-1",
               children: [
                  {
                     label: "Level three 1-1-1",
                  },
               ],
            },
         ],
      },
      {
         label: "Level one 2",
         children: [
            {
               label: "Level two 2-1",
               children: [
                  {
                     label: "Level three 2-1-1",
                  },
               ],
            },
            {
               label: "Level two 2-2",
               children: [
                  {
                     label: "Level three 2-2-1",
                  },
               ],
            },
         ],
      },
      {
         label: "Level one 3",
         children: [
            {
               label: "Level two 3-1",
               children: [
                  {
                     label: "Level three 3-1-1",
                  },
               ],
            },
            {
               label: "Level two 3-2",
               children: [
                  {
                     label: "Level three 3-2-1",
                  },
               ],
            },
         ],
      },
   ];
   const tableData = ref<User[]>([
      { Sname: "供应商一", name: "张三", Sphone: "18888888888", Sposition: "经理", id: 1 },
      { Sname: "供应商二", name: "李四", Sphone: "18888888888", Sposition: "经理", id: 2 },
      { Sname: "供应商三", name: "王五", Sphone: "18888888888", Sposition: "经理", id: 3 },
      { Sname: "供应商四", name: "赵六", Sphone: "18888888888", Sposition: "经理", id: 4 },
   ]);
   const selectedRowId = ref<Number>();
   const selectedRow = ref<User>();

   const handleRadioChange = (row: User) => {
      selectedRow.value = row;
      window.setTimeout(() => {
         isSearch.value = false;
      }, 500);
   };
   // 打开弹窗
   const dialogVisible = ref<boolean>(false);
   const openLoading = (flag: number) => {
      dialogVisible.value = true;
      if (flag === 1) {
         flags.value = 1;
      }
   };
   const submit = () => {
      if (selectedRow.value) {
         emit("selectPurchasingDirector", selectedRow.value);
      }
      dialogVisible.value = false;
      isSearch.value = false;
   };

   const emit = defineEmits(["selectPurchasingDirector"]);

   // 添加处理搜索框失焦的方法
   const handleSearchBlur = () => {};

   defineExpose({ openLoading });
</script>

<style lang="scss" scoped>
   .dialog-content {
      display: flex;
      height: auto;
      min-height: 400px;
      flex-direction: row;
      transition: all 0.3s ease-in-out;
      gap: 10px;
      .row-1 {
         flex: 1;
         border: 1px solid #f0f0f0;

         .row-1-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px;
            width: 76%;
            border-bottom: 1px solid #f0f0f0;
            margin: 0 auto;
            color: #172b4d;
         }
         .row-1-content {
            padding: 10px;
            // padding-left: 20px;
            margin: 0 10px;
            // &:hover {
            //    background: #edecff;
            //    cursor: pointer;
            //    color: #626aef;
            // }
         }
      }
      .row-2 {
         flex: 2;
         border: 1px solid #f0f0f0;
         width: 100%;
         display: flex;
         flex-direction: column;
         overflow: hidden;

         .row-2-search {
            padding: 10px;
            width: 50%;
         }

         .table-container {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;

            &::-webkit-scrollbar {
               width: 6px;
               height: 6px;
            }

            &::-webkit-scrollbar-thumb {
               border-radius: 3px;
               background: #ddd;
            }

            &::-webkit-scrollbar-track {
               border-radius: 3px;
               background: #f5f5f5;
            }

            .el-table {
               height: 100%;
            }
         }
      }
   }
   ::v-deep .el-dialog {
      --el-dialog-padding-primary: 0px;
   }
   ::v-deep .el-dialog__header {
      padding: 10px 16px;
      border-bottom: 1px solid #f0f0f0;
      font-weight: bold;
   }
   ::v-deep .dialog-footer {
      padding: 10px 16px;
      border-top: 1px solid #f0f0f0;
   }
   ::v-deep .el-dialog__headerbtn .el-dialog__close {
      color: #000;
   }
   ::v-deep .el-dialog__body {
      padding: 20px 10px;
   }
   :deep(.cell) {
      white-space: nowrap;
      text-overflow: ellipsis;
   }
   :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
      background-color: #6860ff;
      border-color: #6860ff;
   }
   :deep(.el-checkbox__inner:hover) {
      border-color: #626aef !important;
   }
   :deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
      background-color: #6860ff;
   }
   :deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
      border-color: #6860ff;
   }
   :deep(.el-radio__label) {
      display: none;
   }
   :deep(.el-radio__input.is-checked .el-radio__inner) {
      background: #6860ff;
      color: #6860ff;
   }
   :deep(.el-radio) {
      border-color: none;
   }
   :deep(.el-tree-node:focus > .el-tree-node__content) {
      background-color: #edecff;
   }
   :deep(.el-tree-node__content) {
      height: 36px;
   }
   :deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
      background-color: #edecff;
      color: #6860ff;
   }
   :deep(.el-radio__inner:hover) {
      border-color: #626aef;
   }
</style>
